import React from 'react'
import { Button, Card, message, Tabs, Icon } from "antd";
import './ui.less'
// Tabs

//这一句必须写不然报错
const TabPane = Tabs.TabPane;
export default class Tab extends React.Component {
    constructor() {
        super()
        this.state = {}
    }

    newTabIndex = 0; //add()里需要这个初始化

    handleCallback = (key) => {
        message.info("你当前选择的是:" + key)
    }

    componentWillMount() {
        //定义一个要动态加载的tab标签数据
        const panes = [
            {
                title: "tab1",
                content: "tab1",
                key: "1",
            },
            {
                title: "tab2",
                content: "tab2",
                key: "2",
            },
            {
                title: "tab3",
                content: "tab3",
                key: "3",
            },
        ]
        this.setState({
            activeKey: panes[0].key,
            panes
        })
    }

    onChange = (activeKey) => {
        this.setState({
            activeKey
        })
    }
    // API方法
    onEdit = (targetKey, action) => {
        this[action](targetKey);
    }
    // API方法
    add = () => {
        const panes = this.state.panes;
        const activeKey = `newTab${this.newTabIndex++}`; //newTabIndex自己定义下
        panes.push({ title: activeKey, content: 'Content of new Tab', key: activeKey });
        this.setState({ panes, activeKey });
    }
    // API方法
    remove = (targetKey) => {
        let activeKey = this.state.activeKey;
        let lastIndex;
        this.state.panes.forEach((pane, i) => {
            if (pane.key === targetKey) {
                lastIndex = i - 1;
            }
        });
        const panes = this.state.panes.filter(pane => pane.key !== targetKey);
        if (lastIndex >= 0 && activeKey === targetKey) {
            activeKey = panes[lastIndex].key;
        }
        this.setState({ panes, activeKey });
    }

    render() {
        return (
            <div>
                <Card title="Tab标签" className="cardbox">
                    {/* defaultActiveKey 默认页 */}
                    <Tabs defaultActiveKey="1" onChange={this.handleCallback}>
                        <TabPane tab="标签1" key="1">11111111111</TabPane>
                        <TabPane tab="标签2" key="2" disabled>22222222222</TabPane>
                        <TabPane tab="标签3" key="3">33333333333</TabPane>

                    </Tabs>
                </Card>
                <Card title="Tab标签带图标的" className="cardbox">
                    <Tabs defaultActiveKey="1" onChange={this.handleCallback}>
                        <TabPane tab={<span><Icon type="plus"></Icon>标签1</span>} key="1">11111111111</TabPane>
                        <TabPane tab={<span><Icon type="edit"></Icon>标签2</span>} key="2">22222222222</TabPane>
                        <TabPane tab={<span><Icon type="delete"></Icon>标签3</span>} key="3">33333333333</TabPane>

                    </Tabs>
                </Card>
                <Card title="Tab标签动态的" className="cardbox">
                    <Tabs
                        type="editable-card" //可编辑的卡片 
                        onChange={this.onChange} //切换标签,触发事件把key存进去
                        activeKey={this.state.activeKey} //把key取出来 
                        // defaultActiveKey="1"
                        onEdit={this.onEdit}//增加或者删除时
                    >
                        {
                            this.state.panes.map((arr) => {
                                // 循环遍历得到1个数组包含3个对象,然后返回拼一个标签
                                return <TabPane
                                    tab={arr.title}
                                    key={arr.key}
                                >
                                </TabPane>
                            })
                        }
                    </Tabs>
                </Card>
            </div>
        )
    }
}